<template>
  <div class="channel-edit">
    <!-- 我的频道----------------------------->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">我的频道</div>
      <van-button
        @click="isEdit = !isEdit"
        class="edit-btn"
        type="danger"
        plain
        round
        size="mini"
      >
        {{ isEdit ? '完成' : '编辑' }}
      </van-button>
    </van-cell>
    <!-- 我的频道 - 宫格显示 频道项目 -->
    <van-grid class="my-grid" :gutter="10">
      <!-- 宫格项 -->
      <van-grid-item
        :icon="isDelete(c.id)"
        class="grid-item"
        :class="{ redFont: i === myactive }"
        v-for="(c, i) in myChans"
        :key="i"
        :text="c.name"
        @click="setActive(c.id, i)"
      />
    </van-grid>

    <!-- 推荐频道---------------------------- -->
    <van-cell :border="false">
      <!-- 标题 -->
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <!-- 推荐频道 - 宫格显示 频道项目 -->
    <van-grid class="recommend-grid" :gutter="10">
      <!-- 宫格项 -->
      <van-grid-item
        class="grid-item"
        icon="plus"
        v-for="(c, i) in filterChans"
        :key="i"
        :text="c.name"
        @click="addChan(c)"
      />
    </van-grid>
  </div>
</template>

<script>
import { setItem } from '@/utils/storage.js'
import { getChannels, addChannel, delChannel } from '@/api/channel.js'
// 导入 vuex 仓库
import store from '@/store'

export default {
  name: 'ChannelEdit',
  // 接收 传入数据
  props: {
    // 我的频道数组
    myChans: {
      type: Array,
      required: true
    },
    // 当前选中的 频道 下标
    myactive: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      // 是否处于 编辑频道状态
      isEdit: false,
      // 全部频道的 数组
      allChans: [],
      // 不允许删除的频道 id 数组
      fixedChans: [0, 2]
    }
  },
  methods: {
    // 1.获取所有 频道----------------------
    async getAllChans() {
      const { data: res } = await getChannels()
      this.allChans = res.data.channels
      console.log('allChans->', this.allChans)
    },
    // 2.添加 选中 的 频道 到 我的频道（下 到 上） ------
    async addChan(chan) {
      // a.将 被点击的 频道 加到 我的频道数据 中
      this.myChans.push(chan)
      // ****b.根据登录状况 保存 我的频道数据
      if (store.state.user) {
        try {
          // 添加到 服务器接口
          await addChannel(chan.id, this.myChans.length)
        } catch (error) {
          this.$toast.fail('服务器繁忙，请稍后再试~！')
        }
      } else {
        // 保存到 本地 localStorege 
        setItem(this.$config.MY_CHANNELS, this.myChans)
      }
    },
    // 3.返回 频道 删除按钮图标 名字
    isDelete(chanId) {
      // 如果 处于编辑状态，且 当前频道id 不在 不允许删除数组中，则 返回 clear 图标名
      //                                                   否则，返回 空字符串
      return this.isEdit && !this.fixedChans.includes(chanId) ? 'clear' : ''
    },
    // 4.点击频道，切换父组件 tab
    async setActive(chanId, ind) {
      // 判断当前 编辑状态 -> 需要执行 删除操作
      if (this.isEdit) {
        // 1.如果是 处于 编辑状态，则 将频道 移到下方 频道推荐列表
        this.myChans.splice(ind, 1)
        // 2.如果被删除的 频道 下标  在 当前激活频道 的 前面，则 更新 激活下标
        if (ind <= this.myactive) {
          this.$emit('onChangeTab', this.myactive - 1, true)
        }
        // ****注意：根据登录状态 来 保存 我的频道 数据
        if (store.state.user) {
          try {
            // 提交到 服务器接口 执行删除频道操作
            await delChannel(chanId)
          } catch (error) {
            this.$toast.fail('服务器繁忙，请稍后再试~！')
          }
        } else {
          // 保存到 本地 localStorege
          setItem(this.$config.MY_CHANNELS, this.myChans)
        }
      } else {
        // 2.如果不是 编辑状态，则 切换父组件的 频道tab
        this.$emit('onChangeTab', ind)
      }
    }
  },
  // 入口函数
  created() {
    this.getAllChans()
  },
  computed: {
    // 返回 筛选过的 频道数组
    filterChans() {
      // 推荐频道 =  全部频道 - 我的频道(用户频道)
      // 筛选后的新数组
      const newArr = this.allChans.filter((e) => {
        // 查找 是否 有相同频道
        const isSame = this.myChans.some((myc) => myc.id === e.id)
        // 如果 有相同，则 不加入 到 筛选后的 新数组
        return !isSame
      })
      // 返回 筛选后的 推荐频道
      return newArr
    }
  }
}
</script>

<style lang="less" scoped >
.channel-edit {
  padding: 87px 0;
  .title-text {
    font-size: 32px;
    color: #333;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }
  /deep/ .redFont .van-grid-item__text {
    color: red !important;
  }
  /deep/ .my-grid {
    .van-icon-clear {
      position: absolute;
      right: -10px;
      top: -10px;
      font-size: 15px;
      color: #cacaca;
      z-index: 2;
    }
  }
  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f3f5f7;
      .van-grid-item__text {
        font-size: 28px;
        color: #222;
        margin-top: 0px;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
        .van-grid-item__text {
          margin-top: 0px;
        }
      }
    }
  }
}
</style>
